<template>
  <div id="resources">
    <div class="resources-tree">
      <el-tree
        :data="data"
        node-key="id"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :highlight-current="true"
      ></el-tree>
    </div>
    <div class="resources-table">
      <div class="resources-button">
        <el-button size="medium" type="primary" @click="addResourcesDialog" plain>新 增</el-button>
        <el-button size="medium" type="danger" @click="delectResourcesVisible = true" plain>删 除</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column sortable prop="name" label="资源名称" width="180"></el-table-column>
        <el-table-column sortable prop="type" label="类型" width="180">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.type === 1">菜单</span>
              <span v-if="scope.row.type === 2">按钮</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="sort" label="排序" width="180"></el-table-column>
        <el-table-column sortable prop="createTime" label="创建时间"></el-table-column>
        <el-table-column sortable prop="updateTime" label="最后修改时间"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pull-right paddingTop">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size="10"
          :total="this.total"
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </div>
    <div class="fixclear"></div>
    <el-dialog title="添加菜单" :visible.sync="dialogFormVisible"  @close="cancelR">
      <el-form
        :rules="formRules"
        :model="form"
        ref="form"
        label-width="150px"
      >
        <el-form-item label="活动名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="sort" :label-width="formLabelWidth">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="资源Key" prop="resourceKey" :label-width="formLabelWidth">
          <el-input v-model="form.resourceKey" :disabled="resourceKeyInputEnable"></el-input>
        </el-form-item>
        <el-form-item label="资源配置" prop="configure" :label-width="formLabelWidth">
          <el-input v-model="form.configure"></el-input>
        </el-form-item>

      <el-form-item style="text-align: center">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button type="primary" @click="addResources('form')">确 定</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑菜单" :visible.sync="dialogEditFormVisible"  @close="cancelR">
      <el-form :model="form" :rules="formRules" ref="form"  label-width="150px">
        <el-form-item label="活动名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="sort" :label-width="formLabelWidth">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="资源Key" prop="resourceKey" :label-width="formLabelWidth">
          <el-input v-model="form.resourceKey" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="资源配置" prop="configure" :label-width="formLabelWidth">
          <el-input v-model="form.configure"></el-input>
        </el-form-item>

        <el-form-item style="text-align: center">
          <el-button @click="dialogEditFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="eidtResources('form')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="delectResourcesVisible" width="30%">

      <span>确定要删除资源吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delectResourcesVisible = false">取 消</el-button>
        <el-button type="primary" @click="delectResources">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id:"",
          name:"菜单列表",
          items:[]
        }
      ],
      node: {},
      editNode: {},
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      resourceKeyInputEnable: false,
      multipleSelection: [],
      dialogFormVisible: false,
      dialogEditFormVisible: false,
      delectResourcesVisible: false,
      selectOptions: [
        { value: "1", label: "菜单" },
        { value: "2", label: "按钮" }
      ],
      formLabelWidth: "120px",
      formRules: {
        name: [
          {
            required: true,
            message: "请输入活动名称",
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: "请输入排序号",
            trigger: 'blur'
          }
        ],
        resourceKey: [
          {
            required: true,
            message: "请输入资源Key",
            trigger: 'blur'
          }
        ],
        configure: [
          {
            required: true,
            message: "请输入资源配置",
            trigger: 'blur'
          }
        ]
      },
      form: {
        name: "",
        type: "菜单",
        sort: "",
        resourceKey: "",
        configure: "{ 'url' : '' }"
      },
      defaultProps: {
        children: "items",
        label: "name"
      }
    };
  },
  mounted() {
    this.getResourcesTree();
    this.getAllList();
  },
  methods: {
    getResourcesTree() {
      this.http.post("/api/resource/menuNodeList").then(res => {
        let data = res.data.data;
        this.data[0].items = data;
      });
    },
    getAllList() {
      this.http
        .post("/api/resource/query", {
          Q_COLUMN: "AND_parent_id_EQ",
          Q_VALUE: [],
          P_NO: this.page,
          P_SIZE: this.pageSize
        })
        .then(res => {
          let data = res.data.rows;
          this.total = res.data.records;
          this.tableData = data;
        });
    },
    handleCurrentChange(val) {
      this.page = val;
      let _this = this;
      if (this.node) {
        _this.handleNodeClick(this.node);
      } else {
        _this.getAllList();
      }
    },
    handleNodeClick(data) {
      this.node = data;
      console.log(data);
      if(data.id == ""){
        this.getAllList();
      }
      else{
        this.http
        .post("/api/resource/query", {
          Q_COLUMN: "AND_parent_id_EQ",
          Q_VALUE: data.id,
          P_NO: this.page,
          P_SIZE: this.pageSize
        })
        .then(res => {
          let data = res.data.rows;
          this.tableData = data;
          this.total = res.data.records;
        });
      }
    },
    delectResources() {
      let list = this.multipleSelection.join();
      let _this = this;
      this.http
        .post("/api/resource/delete", {
          id: list
        })
        .then(res => {
          if (res.data.code === 200) {
            if (this.node) {
              _this.handleNodeClick(this.node);
            } else {
              _this.getAllList();
            }
            _this.getResourcesTree();
            this.delectResourcesVisible = false;
          }
        });
    },
    handleClick(data) {
      this.resourceKeyInputEnable = true;
      this.editNode = data;
      this.dialogEditFormVisible = true;
      this.form = {
        name: data.name,
        type: data.type,
        sort: data.sort,
        resourceKey: data.resourceKey,
        configure: data.configure
      };
      if (this.form.type == 1) {
        this.form.type = "菜单";
      }
      if (this.form.type == 2) {
        this.form.type = "按钮";
      }
    },
    handleSelectionChange(val) {
      let arr = [];
      val.map(item => {
        arr.push(item.id);
      });
      this.multipleSelection = arr;
    },
    //关闭弹框右上角
    cancelR(){
      this.$refs.form.clearValidate();
    },
    //取消按钮
    cancel(formName){
      this.$refs[formName].clearValidate();
      this.dialogFormVisible = false;
    },
    addResources(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let _this = this;
          if (this.form.type == "菜单") {
            this.form.type = 1;
          }
          if (this.form.type == "按钮") {
            this.form.type = 2;
          }
          this.http
            .post("/api/resource/save", {
              name: this.form.name,
              type: this.form.type,
              sort: this.form.sort,
              resourceKey: this.form.resourceKey,
              configure: this.form.configure,
              parentId: this.node.id
            })
            .then(res => {
              if (res.data.code === 200) {
                _this.handleNodeClick(this.node);
                _this.getResourcesTree();
                this.$refs[formName].clearValidate();
                this.dialogFormVisible = false;
              }
            });
        }else {
          console.log('error submit!!')
          return false
        }
      })
    },
    eidtResources(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {

          if (this.form.type == "菜单") {
            this.form.type = 1;
          }
          if (this.form.type == "按钮") {
            this.form.type = 2;
          }
          this.http
            .post("/api/resource/save", {
              name: this.form.name,
              type: this.form.type,
              sort: this.form.sort,
              resourceKey: this.form.resourceKey,
              configure: this.form.configure,
              parentId: this.node.id,
              id: this.editNode.id
            })
            .then(res => {
              if (res.data.code === 200) {
                _this.handleNodeClick(this.node);
                _this.getResourcesTree();
                this.dialogEditFormVisible = false;
              }
            });
        }else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addResourcesDialog() {
      // debugger
      this.resourceKeyInputEnable = false;
      if (this.node.id == null || this.node.id == "") {
        this.$message.warning(
          "未选择左侧指定归属菜单,所新增的数据默认归属根菜单"
        );
      }
      this.dialogFormVisible = true;
      this.form = {
        name: "",
        type: "菜单",
        sort: "",
        resourceKey: "",
        configure: "{ 'url' : '' }"
      };
    }
  }
};
</script>

<style lang="scss">
#resources {
  .paddingTop {
    padding-top: 15px;
  }
  height: 100%;
  padding: 0 20px;
  .fixclear {
    clear: both;
  }
  .resources-tree {
    width: 15%;
    height: 100%;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    padding-right: 1%;
    float: left;
  }
  .resources-table {
    .resources-button {
      padding-bottom: 15px;
    }
    width: 83%;
    padding-left: 1%;
    float: left;
  }
}
</style>



